<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://xmlns.jcp.org/jsf/html">   
    <link rel="stylesheet" type="text/css" jsf:name="/style/jquery-picklist.css"/>        
    <script jsf:name="/js/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script jsf:name="/js/jquery.ui.widget.min.js" type="text/javascript"></script>
    <script jsf:name="/js/jquery-picklist.min.js" type="text/javascript"></script>
    <script jsf:name="/js/artist.js" type="text/javascript"></script>
    <f:view>
        <h:form prependId="false" id="form" >       
            <fieldset>
                <legend> Cadastro de Música </legend>

                <label for="titulo">Título:</label>
                <br/>
                <input type="text" required="true" jsf:value="${songManagedBean.song.title}" name="titulo" size="50"/>
                <br/>
                <br/>
                <label for="duration">Duração (segundos):</label>
                <br/>
                <input type="number" min="1" required="true" jsf:value="${songManagedBean.song.duration}" name="duration" />
                <br/>
                <br/>
                <label for="album">Álbum:</label>
                <br/>
                <select size="1" required="true" jsf:value="${songManagedBean.song.album.id}" name="album">
                    <f:selectItem itemLabel="Selecione um álbum" itemValue=""/>
                    <f:selectItems value="${albumManagedBean.list}" var="album" itemLabel="${album.title}"
                                   itemValue="${album.id}"/>
                </select>
                <br/>
                <br/>
                <label for="genre">Gênero</label>
                <br/>
                <select size="1" required="true" jsf:value="${songManagedBean.song.genre.id}" name="genre">
                    <f:selectItem itemLabel="Selecione um gênero" itemValue=""/>
                    <f:selectItems value="${genreManagedBean.list}" var="genre"
                                   itemLabel="${genre.name}" itemValue="${genre.id}"/>
                </select>
                <br/>
                <br/>
                <select jsf:id="musicians" size="1" multiple="true" style="width: 1px; height: 1px;" required="true"
                        jsf:value="${songManagedBean.musiciansId}">                        
                    <f:selectItems value="${musicianManagedBean.list}" var="item"
                            itemValue="${item.id}" itemLabel="${item.name}"/>
                </select> 
                
                <br/>
                <br/>
                <div style="float:left;width:48%;">
                <textarea rows="25" cols="50"  maxlength="4000" 
                    placeholder="Letra da música" 
                    required="true" jsf:id="lyrics" 
                    jsf:value="${songManagedBean.song.lyrics}"/>
                </div>
                <div style="float:right;clear:right;width:48%;">
                <textarea rows="25" cols="50"  maxlength="4000" 
                    placeholder="Tradução da música (opcional)" 
                    jsf:id="translate" 
                    jsf:value="${songManagedBean.song.lyricsTranslation}"/>
                
                </div>
                <input class="button" type="submit" value="Salvar" jsf:action="${songManagedBean.register()}"/>
                <input class="button" type="button" value="Cancelar" jsf:action="${songManagedBean.cancel}"/>
            </fieldset> 
        </h:form>    
    </f:view>
</html>

